<template>
  <div class="box">
    <el-table :header-cell-style="{background:'#eee',color:'black'}" size="mini" :data="tableData"
              style="width: 100%; border: 1px solid #ebebeb;box-shadow: 4px 4px 4px #efeeee;border-radius:6px;">

      <el-table-column prop="desc" :label="column[0]" width="180">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.desc" v-show="false"/>
          <span v-show="true">{{scope.row.desc}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="firstValue" :label="column[1]" width="180">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.firstValue" v-show="scope.row.isEditor"/>
          <span v-show="!scope.row.isEditor">{{scope.row.firstValue}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="secondValue" :label="column[2]">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.secondValue" v-show="scope.row.isEditor"/>
          <span v-show="!scope.row.isEditor">{{scope.row.secondValue}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="threeValue" :label="column[3]">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.threeValue" v-show="scope.row.isEditor"/>
          <span v-show="!scope.row.isEditor">{{scope.row.threeValue}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fourValue" :label="column[4]">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.fourValue" v-show="scope.row.isEditor"/>
          <span v-show="!scope.row.isEditor">{{scope.row.fourValue}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fiveValue" :label="column[5]">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.fiveValue" v-show="scope.row.isEditor"/>
          <span v-show="!scope.row.isEditor">{{scope.row.fiveValue}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sixValue" :label="column[6]">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.sixValue" v-show="scope.row.isEditor"/>
          <span v-show="!scope.row.isEditor">{{scope.row.sixValue}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sevenValue" :label="column[7]">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.sevenValue" v-show="scope.row.isEditor"/>
          <span v-show="!scope.row.isEditor">{{scope.row.sevenValue}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="warning" @click="edit(scope.row, scope)">编辑</el-button>
          <el-button type="danger" @click="save(scope.row)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {
    getSetting,
    updateSetting
  } from '@/api/retrieval'

  export default {
    data() {
      return {
        column: [],
        tableData: []
      };
    },
    mounted() {
      // this.column = ["配置名称", "2016年末", "2017年末", "2018年末", "2019年末", "2020年末", "2021年末", "本期末"]
      let columnValue = [];
      columnValue.push("配置名称")

      let now = new Date();
      let thisYear = now.getFullYear();
      let startYear = thisYear - 6;
      for (let i = startYear;i<=thisYear; i++) {
        if (i === thisYear) {
          columnValue.push("本期末")
        } else {
          columnValue.push(i + "年末")
        }
      }
      this.column = columnValue;

      getSetting().then((res) => {
        this.tableData = res.data;
      });

    },
    methods: {
      edit(row, index) {
        row.isEditor = true;
      },
      save(row, index) {
        updateSetting(row).then((res) => {
          row.isEditor = false;
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 28px;
    padding-top: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f9f9f9;

    .head {
      height: 44px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .back {
        // height: 100%;
        // width: 130px;
        // background-color: #ebebeb;
      }
    }

    .page {
      border: 1px solid #ebebeb;
      margin-top: 8px;
      border-radius: 6px;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 42px;
      box-shadow: 4px 4px 4px #efeeee;
    }
  }
</style>
